<template>
  <!-- 头部导航 -->
  <div class="Roles-container">
    <el-tabs v-model="activeName" style="margin-left: 30px; " @tab-click="handleClick">
      <el-tab-pane label="全部订单" name="second" />
      <el-tab-pane label="快车订单" name="first" />
      <el-tab-pane label="出租车订单" name="third" />
    </el-tabs>
    <!-- 卡片区域 -->
    <el-card style="margin-top: -50px;">
      <el-table :data="CarOrder" style="width: 100%" max-height="350">
        <el-table-column fixed prop="creationtime" label="日期" width="150" />
        <el-table-column prop="carType" label="车辆类型" width="120" />
        <el-table-column prop="ordernum" label="订单编号" width="180" />
        <el-table-column prop="wxName" label="用户" width="120" />
        <el-table-column prop="driverName" label="司机" width="120" />
        <el-table-column prop="origin" label="出发地" width="240" />
        <el-table-column prop="bourn" label="目的地" width="240" />
        <el-table-column prop="price" label="价格" width="120" />
        <el-table-column prop="state" label="订单状态" width="120" />
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button v-if="scope.row.state !== '已完成' && scope.row.state !== '已取消'" type="text" size="small" @click.native.prevent="askCanllOrder(scope.row.orderId)">
              取消
            </el-button>
            <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.row.orderId)">
              删除
            </el-button>
            <el-button v-if="scope.row.state === '已完成'" type="text" size="small" @click.native.prevent="upqian(scope.row)">
              退款
            </el-button>
            <el-button
              v-if="scope.row.state === '已完成' && scope.row.state !== '已支付'"
              type="text"
              size="small"
              @click.native.prevent="deposit(scope.row)"
            >
            <el-button v-if="scope.row.state === '已完成'" type="text" size="small" @click.native.prevent="">
              提现
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页区域 -->
    <el-pagination :current-page="querInfo.pagenum" :page-sizes="[5, 6]" :page-size="querInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
import { order, orderexpress, orderetaxi, uporderstart, lockOrder, refundMoney, checkDeposit } from '@/api/order'
export default {
  name: 'Role',
  data() {
    return {
      activeName: 'second', // 头部切换
      CarOrder: [], // 订单数组
      weizifu: '未支付',
      answer: '未接驾',
      join: '已接驾',
      cancel: '已取消',
      complete: '已完成',
      delet: '已删除',
      tuikuan:'已退款',
      tixian:'已支付',
      list: '快车',
      list1: '出租车',
      // rolesList: [], // 角色列表
      querInfo: {
        // 当前页码
        pagenum: 1,
        // 每页显示条数
        pagesize: 5
      },
      // 角色总数
      total: 0
    }
  },
  mounted() {
    this.getRolesList()
  },
  methods: {
    // 获取全部订单列表
    async getRolesList() {
      const result = await order(this.querInfo)
      if (result.code !== 200) return this.$message.error('获取订单列表失败')
      this.CarOrder = result.data
      this.total = result.total
      console.log(this.CarOrder, 110)
      for (var i = 0; i < this.CarOrder.length; i++) {
        if (this.CarOrder[i].carType === 27) {
          this.CarOrder[i].carType = this.list
        } else if (this.CarOrder[i].carType === 28) {
          this.CarOrder[i].carType = this.list1
        }
      }
      for (let j = 0; j < this.CarOrder.length; j++) {
        if (this.CarOrder[j].state === 5) {
          this.CarOrder[j].state = this.weizifu
        } else if (this.CarOrder[j].state === 6) {
          this.CarOrder[j].state = this.answer
        } else if (this.CarOrder[j].state === 7) {
          this.CarOrder[j].state = this.join
        } else if (this.CarOrder[j].state === 8) {
          this.CarOrder[j].state = this.cancel
        } else if (this.CarOrder[j].state === 9) {
          this.CarOrder[j].state = this.complete
        } else if (this.CarOrder[j].state === 10) {
          this.CarOrder[j].state = this.delet
        }else if (this.CarOrder[j].state === 42) {
          this.CarOrder[j].state = this.tuikuan
        }else if (this.CarOrder[j].state === 39) {
          this.CarOrder[j].state = this.tixian
        }
      }
    },
    // 获取快车订单列表
    async getexpressorder() {
      const ddd = await orderexpress(this.querInfo)
      if (ddd.code !== 200) return this.$message.error('获取快车列表失败')
      this.CarOrder = ddd.data
      this.total = ddd.total

      for (var i = 0; i < this.CarOrder.length; i++) {
        if (this.CarOrder[i].carType === 27) {
          this.CarOrder[i].carType = this.list
        } else {
          console.log(1)
        }
      }
      for (let j = 0; j < this.CarOrder.length; j++) {
        if (this.CarOrder[j].state === 5) {
          this.CarOrder[j].state = this.weizifu
        } else if (this.CarOrder[j].state === 6) {
          this.CarOrder[j].state = this.answer
        } else if (this.CarOrder[j].state === 7) {
          this.CarOrder[j].state = this.join
        } else if (this.CarOrder[j].state === 8) {
          this.CarOrder[j].state = this.cancel
        } else if (this.CarOrder[j].state === 9) {
          this.CarOrder[j].state = this.complete
        } else if (this.CarOrder[j].state === 10) {
          this.CarOrder[j].state = this.delet
        }
      }
    },
    // 获取出租车订单列表
    async getorderetaxi() {
      const ddd = await orderetaxi(this.querInfo)
      if (ddd.code !== 200) return this.$message.error('获取快车列表失败')
      this.CarOrder = ddd.data
      this.total = ddd.total
      for (var i = 0; i < this.CarOrder.length; i++) {
        if (this.CarOrder[i].carType === 28) {
          this.CarOrder[i].carType = this.list1
        } else {
          console.log(1)
        }
      }
      for (let j = 0; j < this.CarOrder.length; j++) {
        if (this.CarOrder[j].state === 5) {
          this.CarOrder[j].state = this.weizifu
        } else if (this.CarOrder[j].state === 6) {
          this.CarOrder[j].state = this.answer
        } else if (this.CarOrder[j].state === 7) {
          this.CarOrder[j].state = this.join
        } else if (this.CarOrder[j].state === 8) {
          this.CarOrder[j].state = this.cancel
        } else if (this.CarOrder[j].state === 9) {
          this.CarOrder[j].state = this.complete
        } else if (this.CarOrder[j].state === 10) {
          this.CarOrder[j].state = this.delet
        }
      }
    },
    // 选择显示的数量
    handleSizeChange(newSize) {
      this.querInfo.pagesize = newSize
      this.getRolesList()
    },
    // 显示第几页的数据
    handleCurrentChange(num) {
      this.querInfo.pagenum = num
      this.getRolesList()
    },
    // 切换
    handleClick() {
      if (this.activeName === 'second') {
        this.getRolesList()
      } else if (this.activeName === 'first') {
        this.getexpressorder()
      } else if (this.activeName === 'third') {
        this.getorderetaxi()
      }
    },
    // 删除订单
    deleteRow(Id) {
      const orderId = Id
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteOrder(orderId)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 删除订单
    async deleteOrder(orderId) {
      const res = await uporderstart({ orderId })
      if (res.code !== 200) return this.$message.error('删除失败')
      if (res.code === 200) {
        this.$message({ message: '删除成功', type: 'success' })
        this.getRolesList()
        this.getexpressorder()
        this.getorderetaxi()
      }
    },
    // 询问是否退款
    async upqian(user) {
      console.log(user)
      this.$confirm('此操作将执行退款, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.refund(user)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退款'
          })
        })
    },
    // 退款的方法
    async refund(user) {
      console.log(user.userId, 228)
      console.log(user.price, 229)
      const res = await refundMoney(user.userId, user.price, user.orderId, user.driverId)
      if (res.code !== 200) return this.$message.error('退款失败')
      if (res.code === 200) {
        this.$message({ message: '退款成功', type: 'success' })
        this.getRolesList()
        this.getexpressorder()
        this.getorderetaxi()
      }
    },
    // 询问是否要取消订单
    askCanllOrder(orderId) {
      console.log(orderId, 258)
      this.$confirm('此操作将永久取消该订单且不可还原, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.lockOrder(orderId)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 取消订单
    async lockOrder(Id) {
      console.log(Id, 274)
      const res = await lockOrder(Id)
      if (res.code !== 200) return this.$message.error('取消失败')
      if (res.code === 200) {
        this.$message({ message: '取消成功', type: 'success' })
        this.getRolesList()
        this.getexpressorder()
        this.getorderetaxi()
      }
    },
    // 询问是否要提现金钱
    deposit(Id) {
      this.$confirm('此操作将提现金额去司机钱包, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.checkDeposit(Id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 确认提现金额
    async checkDeposit(Id) {
      console.log(Id);
      const res = await checkDeposit(Id.driverId,Id.orderId,Id.price,Id.userId)
      if (res.code !== 200) return this.$message.error('提现失败')
      if (res.code === 200) {
        this.$message({ message: '提现成功', type: 'success' })
        this.getRolesList()
        this.getexpressorder()
        this.getorderetaxi()
      }
    }
  }
}
</script>

<style lang="scss">
.el-card {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.15) !important;
}
.el-table {
  margin-top: 15px;
  font-size: 12px;
}
.el-pagination {
  margin-top: 15px;
}
</style>
